<template>
  <div class="padding">
      <a-card :bordered="false">
        <div class="flex-between margin-bottom">
          <a-space>
            <create/>
            <batch-import/>
            <a-button>导出</a-button>
            <a-divider type="vertical"></a-divider>
            <category/>
            <units/>
          </a-space>
          <a-space>
            <a-select class="width-sm" placeholder="分类筛选">
              <a-select-option v-for="item in categoryStore.categories" :key="item.id">
                {{item.name}}
              </a-select-option>
            </a-select>
            <a-input-search placeholder="输入关键字搜索" />
          </a-space>
        </div>
        <a-table :row-selection="{}"
                 :columns="columns"
                 :data-source="dataSource"
                 :pagination="localTableConfig">
          <template #bodyCell="{column,record,}">
            <template v-if="column.key === 'action'">
              <a-button type="link" size="small">编辑</a-button>
              <a-button type="text" size="small" danger>删除</a-button>
            </template>
          </template>
        </a-table>
      </a-card>
  </div>
</template>

<script setup lang="ts">
import type { TableColumnsType } from "ant-design-vue";
import { reactive } from 'vue';
import Create from './components/Create.vue'
import {tablePageConfig} from "@/config";
import Category from "./components/category.vue";
import Units from "@/views/product/components/Units.vue";
import {useCategoryStore} from "@/store/category";
import BatchImport from "@/views/product/components/BatchImport.vue";

const categoryStore = useCategoryStore()

const localTableConfig = {
  ...tablePageConfig,
  defaultPageSize: 15
}
/**
* 定义表格列配置
* @type {TableColumnsType} columns 表格列的配置数组
*/
const columns: TableColumnsType = [
  { key: 'name', title: '产品名称', dataIndex: 'name' },
  { key: 'category', title: '分类', width: 120,dataIndex: 'category' },
  { key: 'cost', title: '进货价', width: 120,dataIndex: 'cost' },
  // 定义未付款列，支持排序
  { key: 'price', title: '销售价', width: 120,dataIndex: 'price' },
  // 定义金额列，支持排序
  { key: 'unit', title: '单位', width: 160,dataIndex: 'unit'},
  { key: 'update_time', title: '更新时间',dataIndex: 'update_time', width: 160, sorter: (a, b) => a.amount - b.amount },
  // 定义操作列
  { key: 'action', title: '管理', width: 240 }
]

let dataSource: any[] = []

const params = reactive({
  type: <number>0
})


for (let i = 0; i < 20; i++) {
  dataSource.push({
    id: i + 1,
    name: '产品名称' + i ,
    category:'分类名称'+i,
    cost: 100 + i,
    price: 200 + i,
    unit: '单位'+i,
    update_time: '2025-03-'+i
  })
}
</script>

<style scoped></style>